<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent {
			width: 300px;
			height: 300px;
			background-image: url(js/img/time.jpg); 
			background-size: cover;
			background-position: center;
			display: flex;
			justify-content: center;
			align-items: center;
			}
			.child {
			font-size: 2em;
			}
		</style>
	</head>
	<body>
    <div class="parent">
        <div class="child">
            <span id="time-display"></span>
        </div>
    </div>
    <script>
		const timeDisplay = document.getElementById('time-display');
		function updateTime() {
			const now = new Date();
			let hours = now.getHours();
			let minutes = now.getMinutes();
			let seconds = now.getSeconds();
				if (hours < 10) {
				hours = '0' + hours;
			}
			if (minutes < 10) {
				minutes = '0' + minutes;
			}
			if (seconds < 10) {
				seconds = '0' + seconds;
			}
				const timeString = `${hours}:${minutes}:${seconds}`;
			timeDisplay.textContent = timeString;
			const randomColor = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
			timeDisplay.style.color = randomColor;
		}
		setInterval(updateTime, 1000);
		updateTime()
			</script>
			</body>
		</html>
